<template>
    <div class="detail-map">
        <detail-section title="位置周边" more-text="查看更多周边信息">
            <div class="map-inner" ref="mapRef"></div>
        </detail-section>
    </div>
</template>

<script setup>
    import detailSection from "@/components/detail-section/detail-section.vue";
    import { ref,onMounted } from "vue"

    const props = defineProps({
        positionData:{
            type:Object,
            default:() =>({})
        }
    })

    const mapRef = ref()
    
    onMounted(() => {
        const map = new BMapGL.Map(mapRef.value);
        const point = new BMapGL.Point(props.positionData.longitude, props.positionData.latitude);
        map.centerAndZoom(point, 15); 

        const marker = new BMapGL.Marker(point);  
        map.addOverlay(marker)
    })
</script>


<style lang='less' scoped>
.map-inner {
    width: 100%;
    height: 250px;
}
</style>